{% extends 'base/front_base.html' %}
{% load articles_filters %}

{% block title %}
    首页
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{% static 'css/articles/index.min.css' %}">
    <script src="{% static 'js/index.min.js' %}"></script>
    <script src="{% static 'js/template-web.js' %}"></script>
    <script id="article-item" type="text/plain">
    {% verbatim %}
        {{ each articles article index}}
            <li>
                <div class="thumbnail-group">
                    <a href="/article/{{ article.id }}">
                        <img src="{{ article.thumbnail }}"
                             alt="">
                    </a>
                </div>
                <div class="article-group">
                    <p class="title"><a href="/article/{{ article.id }}">{{ article.title }}</a></p>
                    <p class="desc">{{ article.desc }}</p>
                    <p class="more">
                        <span class="category">{{ article.category.name }}</span>
                        <span class="pub-time">{{ article.pub_time | timeSince}}</span>
                        <span class="author">{{ article.author.username }}</span>
                    </p>
                </div>
            </li>
        {{/each}}
    {% endverbatim %}
    </script>
{% endblock %}

{% block main %}
    <div class="main">
        <div class="wrapper">
            <div class="container-wrapper">
                <div class="main-wrapper">
                    <div class="banner-group" id="banner-group">
                        <ul class="banner-ul" id="banner-ul">
                            {% for banner in banners %}
                                <li><a href="{{ banner.link_to }}"><img
                                    src="{{ banner.image_url }}"
                                    alt=""></a></li>
                            {% endfor %}
                        </ul>
                        <span class="arrow left-arrow"><</span>
                        <span class="arrow right-arrow">></span>

                        <div class="page-control-group">
                            <ul class="page-control" id="page-control">

                            </ul>
                        </div>
                    </div>

                    <div class="list-outer-group">
                        <ul class="list-tag">
                            <li data-category="0" class="active"><a href="javascript: void(0);">最新</a></li>
                            {% for category in categories %}
                                <li data-category="{{ category.pk }}"><a href="javascript: void(0);">{{ category.name }}</a></li>
                            {% endfor %}
                        </ul>

                        <ul class="list-inner-group">
                            {% for article in articles %}
                                <li>
                                    <div class="thumbnail-group">
                                        <a href="{% url 'articles:article_detail' article_id=article.pk %}">
                                            <img src="{{ article.thumbnail }}"
                                                 alt="">
                                        </a>
                                    </div>
                                    <div class="article-group">
                                        <p class="title"><a href="{% url 'articles:article_detail' article_id=article.pk %}">{{ article.title }}</a></p>
                                        <p class="desc">{{ article.desc }}</p>
                                        <p class="more">
                                            <span class="category">{{ article.category.name }}</span>
                                            <span class="pub-time">{{ article.pub_time|time_since }}</span>
                                            <span class="author">{{ article.author.username }}</span>
                                        </p>
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>

                        <div class="load-more-group">
                            <button id="load-more-btn" class="load-more">查看更多</button>
                        </div>
                    </div>
                </div>

                {% include 'common/sidebar.html' %}
            </div>
        </div>
    </div>
{% endblock %}
